<template>
  <div class="about">
   <h3>登录页面</h3>
   <table class="table table-bordered">
    <tbody>
      <tr>
        <td align="right">账号</td>
        <td><input type="text" v-model="userName"></td>
      </tr>

      <tr>
        <td align="right">密码</td>
        <td><input type="text" v-model="userPwd"></td>
      </tr>

      <tr>
        <td align="right"></td>
        <td><input type="button" @click="login" value="登录" class="btn btn-success"></td>
      </tr>
    </tbody>
   </table>
  </div>
</template>
<script setup lang="ts">
//数据驱动视图
//响应式，数据变了，视图变。视图变了，数据变，这就是双向绑定（v-model）
import {ref,reactive} from 'vue'

let userName = ref('阿道夫');
let userPwd = ref('')

const login=()=>{
alert(userName.value+','+userPwd.value)
}
</script>
<style>

</style>
